<template>
  <div>
    <div>
    <el-table
      size="medium"
      class="userBody"
      border
      stripe
      fit
      ref="singleTable"
      :data="bindingList"
      highlight-current-row
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        property="workflowNodeVersion"
        label="工单流程版本"
        width="120">
      </el-table-column>
      <el-table-column
        property="workflowName"
        label="工单流程"
        width="120">
      </el-table-column>
      <el-table-column
        property="workflowNodeName"
        label="流程子节点"
        width="120">
      </el-table-column>
      <el-table-column
        property="modelPName"
        label="工单模板"
        width="120">
      </el-table-column>
      <el-table-column
        property="modeName"
        label="模板子节点"
        width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row);dialogFormVisible = true" >编辑绑定</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <div>
      <el-dialog title="工单编辑绑定" :visible.sync="dialogFormVisible" style="width:80%;margin-left:10%;font-weight: bold">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="工单流程节点" :label-width="formLabelWidth" prop="workOrder">
            <!--<el-input v-model="flowNodeValue" placeholder="请输入内容"></el-input>-->
            <el-select v-model="flowNodeValue" disabled placeholder="请选择">
              <!--<el-option-->
                <!--v-for="item in bindingList"-->
                <!--:key="item.workflowNodeId"-->
                <!--:label="item.workflowNodeName"-->
                <!--:value="item.workflowNodeId">-->
              <!--</el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="工单模型节点" :label-width="formLabelWidth" prop="flow">
            <el-select v-model="modeNameValue" placeholder="请选择">
              <el-option
                v-for="item in modelNodeList"
                :key="item.modelId"
                :label="item.modelName"
                :value="item.modelId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--<el-button type="primary" @click="submitForm('ruleForm')" size="small">立即绑定</el-button>-->
          <el-button type="primary" @click="nowHandleEdit" size="small">立即绑定</el-button>
          <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { mapState} from 'vuex';
  import axios from 'axios';
  import QS from 'qs';


    export default {
      name: "flowBingdingBody",
      data() {
        return {
          flowNodeValue: '',
          modelNodeList: [],
          dialogFormVisible: false,
          ruleForm: {
            userid:'',
            workOrder: '',
            flow: '',
          },
          formLabelWidth: '110px',
          //提交绑定数据
          bindingID: '',
          bindingWorkflowNodeId : '',
          bindingModelPid: '',
          modeNameValue: '',


          // rules: {
          //   workOrder: [
          //     { required: true, message: '请选择工单模型', trigger: 'change' },
          //     { pattern: /,{1}/, message: '请选择至最后一级选项' },
          //   ],
          //   flow: [
          //     { required: true, message: '请选择流程模型', trigger: 'change' },
          //     { pattern: /,{1}/, message: '请选择至最后一级选项' },
          //   ],
          // }

        }
      },
      computed:{
        ...mapState([
          'userTableData',
          'userEditData',
          'bindingList',
          'modelList'
        ])
      },
      methods: {

        //删除绑定关系
        handleDelete(index, row) {
          const pindingId = {}
          pindingId.id = this.bindingList[index].id;
          axios.post('/api/case/delWorkflowNodeModelBind',QS.stringify(pindingId))
            .then(function (response) {
              const data = response.data
              if (data.code == "200"){
                alert('删除成功！');
              }else if (data.code == '201'){
                alert('用户不存在');
              }else{
                alert('删除失败' + '错误代码:' + data.code + '请联系系统管理员！')
              }
            })
            .catch(function (error) {
            });
          this.bindingList.splice(index, 1);  //页面上删除这条数据
        },
        //编辑绑定
        handleEdit(index, row){
          var that = this;
          that.flowNodeValue = that.bindingList[index].workflowNodeName;
          that.bindingID = that.bindingList[index].id;
          that.bindingWorkflowNodeId = that.bindingList[index].workflowNodeId;
          // console.log("167"+JSON.stringify(that.bindingList[index]))
          //获取模型信息
          var getmodel = {};
            getmodel.clasz = "case";
            getmodel.hasProperties = "false"
            getmodel.isTree = "true"
          axios.post('/api/cmdb/findModelByClasz',QS.stringify(getmodel))
            .then(function (model) {
              var modelList = model.data;
              var modleLlitLength = model.data.data.length
              if (modelList.code == "200"){
                for (var i=0; i<modleLlitLength; i++) {
                  var modelNode = modelList.data[i];
                  if (modelNode.id == that.bindingList[index].modelPid){
                    that.modelNodeList = [];
                    for (var i=0; i<modelNode.children.length; i++) {
                      console.log("182"+JSON.stringify(modelNode.children))
                      var modelNodeAll = {}
                        modelNodeAll.modelId = modelNode.children[i].id;
                        modelNodeAll.modelName = modelNode.children[i].name;
                        that.modelNodeList.push(modelNodeAll);
                      // console.log("207"+JSON.stringify(modelNodeAll));
                    }
                    break;
                  } else {
                    alert("error");
                  };
                };
              } else {
                alert("code:"+modelList.code);
              }
            })

        },
        //立刻绑定
        nowHandleEdit(index, row) {
          var that = this;
          // alert("206"+that.bindingID+";"+that.bindingWorkflowNodeId+";"+that.modeNameValue)
          var pindingValue = {};
          pindingValue.id = that.bindingID;
          pindingValue.workflowNodeId = that.bindingWorkflowNodeId;
          pindingValue.modelid = that.modeNameValue;
          // console.log("id"+":"+pindingValue.id+";"+"model"+":"+pindingValue.modelid+";"+"workflowNodeId"+":"+pindingValue.workflowNodeId+";")
          axios.post('/api/case/editWorkflowNodeBind',QS.stringify(pindingValue))
            .then(function (response) {
              var pindingPostValue = response.data
              if (pindingPostValue.code == 200){
                alert("绑定成功！")
                that.dialogFormVisible = false;
                that.$emit('clickSearchBinding', true);
              } else {
                console.log("error")
              };
            })
        },
      },
    }
</script>

<style scoped>
  .userBody{
    margin-top: 10px;
  }
</style>
